<template>
  <div class="chart-content w-p-100 h-p-100" :id="idName"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
const porp = defineProps({
  idName: {
    Type: String,
    default: () => "chart" + Math.floor(Math.random() * 100000000),
  },
  configData: {
    Type: Object,
    default: () => {
      return {
        xAxisData: [],
        yAxisName: [],
        series: [],
      };
    },
  },
});

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById(porp.idName));

  const option = {
    backgroundColor: "transparent",
    xAxis: [
      {
        type: "category",
        data: porp.configData.xAxisData,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#d2d4da",
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#04BBFF",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: porp.configData.yAxisName[0],
        nameTextStyle: {
          color: "#d2d4da",
          align: "right",
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: ["rgba(4,187,255,0.2)"],
          },
        },
        axisLabel: {
          textStyle: {
            color: "#d2d4da",
            fontSize: "9",
          },
        },
        axisLine: {
          show: false,
        },
      },
      {
        type: "value",
        name: porp.configData.yAxisName[1],
        nameTextStyle: {
          color: "#d2d4da",
        },
        position: "right",
        axisLabel: {
          textStyle: {
            color: "#d2d4da",
            fontSize: "9",
          },
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: porp.configData.series[0].name,
        barWidth: "40%",
        borderWidth: "0",
        type: "pictorialBar",
        yAxisIndex: 0,
        symbol: "path://M0,0 L10,10 L10,10 L10,70 L-10,70 L-10,10 L-10,10Z",
        zlevel: 99,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 1,
                  color: "#FFA900", // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: "#333", // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
        label: {
          color: "#fff",
          show: true,
          position: "inside",
          zlevel: "1000",
        },
        data: porp.configData.series[0].data,
      },
      {
        name: porp.configData.series[1].name,
        type: "bar",
        itemStyle: {
          color: "rgba(0, 222, 255,0.4)",
          borderColor: "#707070",
        },
        barWidth: "40%",
        label: {
          color: "#dbdde2",
          show: true,
          position: "inside",
        },
        data: porp.configData.series[1].data,
      },
      {
        name: porp.configData.series[2].name,
        showSymbol: false,
        smooth: true,
        type: "line",
        yAxisIndex: 1,
        data: porp.configData.series[2].data,
        itemStyle: {
          normal: {
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(5,140,255, 0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(5,140,255, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(5,140,255, 0)",
                },
              ]),
              shadowColor: "rgba(5,140,255,1)",
              shadowBlur: 1,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(5,140,255, 0.9)",
                },
                {
                  offset: 0.6,
                  color: "rgba(5,140,255, 0.3)",
                },
              ]),
            },
          },
        },
      },
    ],
  };

  // 绘制图表
  myChart.setOption(option);
});
</script>

<style scoped>
</style>